<template>
  <div class="index-container ec-container">
     <el-row :gutter="10" class="form">
      <el-col :span="4">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>平台：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺编码：</span>
          <el-select class="w40" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺名称：</span>
          <el-select class="w40" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>日期：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>时间：</span>
          <el-date-picker class="w60" v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
      </el-col>
    </el-row>
    <!-- 销售总额 -->
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="wrap">
          <h4>销售额（总）</h4>
          <h2>{{basicData.saleTotalAmount}}</h2>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="wrap">
          <h4>订单数（总）</h4>
          <h2>{{basicData.totalOrderQuantity}}</h2>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="wrap">
          <h4>客单价（总）</h4>
          <h2>{{basicData.customersUnitPrice}}</h2>
        </div>
      </el-col>
    </el-row>

    <!-- 销售额（会员 非会员） -->
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="wrap">
          <h4>销售额（会员）</h4>
          <h2>{{basicData.memSaleAmount}}</h2>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="wrap">
          <h4>销售额（非会员）</h4>
          <h2>{{basicData.nonMemSaleAmount}}</h2>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="wrap">
          <h4>订单数（会员）</h4>
          <h2>{{basicData.memOrderQuantity}}</h2>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="wrap">
          <h4>订单数（非会员）</h4>
          <h2>{{basicData.nonMemOrderQuantity}}</h2>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="wrap">
          <h4>客单价（会员）</h4>
          <h2>{{basicData.memCustomersUnitPrice}}</h2>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="wrap">
          <h4>客单价（非会员）</h4>
          <h2>{{basicData.nonMemCustomersUnitPrice}}</h2>
        </div>
      </el-col>
    </el-row>

    <!-- 指标说明  销售来源 -->
    <el-row :gutter="10">
      <el-col :span='6'>
        <div class="tips-wrap">
          <p>指标说明：</p>
          <p>1、统计日期：线下取订单的创建日期，线上取订单的付款日期；</p>
          <p>2、数据范围：线上取付款成功订单，线下取正常销售订单；</p>
          <p>3、销售额：实际支付金额；</p>
          <p>4、订单数：主订单数；</p>
          <p>5、商品数量：购买商品数；</p>
          <p>6、折扣率：销售额/吊牌金额；</p>
          <p>7、客单价：销售额、订单数；</p>
          <p>8、笔件数：商品数量/订单数；</p>
        </div>
        
      </el-col>
      <el-col :span='18'>
        <div id="source" class="grid-content"></div>
      </el-col>
    </el-row>

    <!-- 订单数分布  折扣率趋势 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="type" class="grid-content"></div>
      </el-col>
      <el-col :span="12">
        <div id="price" class="grid-content"></div>
      </el-col>
    </el-row>

    <!-- 明细数据表格部分 -->
    <div class="table-wrap">
      <p class="title">销售结构明细数据</p>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="saleDate"
        label="付款日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="totalOrderQuantity"
        label="订单数（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="totalSaleAmount"
        label="销售额（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="memQuantity"
        label="客户数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="productQuantity"
        label="商品数量（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="customersUnitPrice"
        label="客单价（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="笔件数（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="discountRate"
        label="折扣率（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nonMemOrderQuantity"
        label="订单数（非会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nonMemSaleAmount"
        label="销售额（非会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nonMemProductQuantity"
        label="商品数量（非会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nonMemQuantity"
        label="非会员数（非会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="memOrderQuantity"
        label="订单数（会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="memSaleAmount"
        label="销售额（会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="memProductQuantity"
        label="商品数量（会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="memQuantity"
        label="会员数（会员）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="chnennelCode"
        label="渠道"
        width="120">
      </el-table-column>
      <el-table-column
        prop="platformName"
        label="平台"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeName"
        label="店铺名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeCode"
        label="店铺编码">
      </el-table-column>
    </el-table>
  </div>
    
    
  </div>
</template>

<script>
import {
  querySaleConstructionDetailData,
  querySaleConstructionBasicsData,
  querySaleConstructionDiscountChartsData,
  querySaleConstructionOrderChartsData,
  querySaleConstructionSourceChartsData
} from "@/assets/js/utils.js";

export default {
  data() {
    return {
      value: {},
      options: {},
      value1: {},
      tableData: [], //销售结构明细表格
      discountOption: {} ,//折扣率趋势表图
      basicData:{}
    };
  },
  mounted() {
    this.getDetailTableData();
    this.getList();
    this.type();
    this.price();
    this.source();
  },
  created() {},
  methods: {
    //销售结构明细数据查询
    getDetailTableData() {
      this.utils.request.querySaleConstructionDetailData({}, res => {
        if (res.code == "0000") {
          this.tableData = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    //销售结构基础数据查询
    getList(){
      this.utils.request.querySaleConstructionBasicsData({},res=>{
        console.log('基础数据',res)
          if(res.code == '0000'){
            this.basicData = res.data
          }
        })
    },
    // 客户购买类型
    type() {
      let type = document.getElementById("type");
      let myChartChina = this.$echarts.init(type);
      this.utils.request.querySaleConstructionOrderChartsData({}, res => {
        console.log('订单分布数',res);
        if (res.code == "0000") {
          let option = {
            title: {
              text: "订单数分布"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["订单数（会员）", "订单数（总）"]
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            toolbox: {
              feature: {}
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: res.data.x,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "订单数（会员）",
                type: "line",
                smooth: true,
                stack: "总量1",
                data: res.data.y1
              },
              {
                name: "订单数（总）",
                type: "line",
                smooth: true,
                stack: "总量2",
                data: res.data.y2
              }
            ]
          };
          myChartChina.setOption(option);
        } else {
          this.$toast(res.msg);
        }
      });
    },

    // 客户类型购买_客单价
    price() {
      let price = document.getElementById("price");
      let myChartChina = this.$echarts.init(price);
      this.utils.request.querySaleConstructionDiscountChartsData({}, res => {
        console.log("折扣率", res);
        if (res.code == "0000") {
          let option = {
            title: {
              text: "折扣率趋势"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["一次客", "回购客1"]
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            toolbox: {
              feature: {}
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: res.data.x,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "一次客",
                type: "line",
                smooth: true,
                stack: "总量1",
                data: res.data.y1
              },
              {
                name: "回购客1",
                type: "line",
                smooth: true,
                stack: "总量2",
                data: res.data.y2
              }
            ]
          };
          myChartChina.setOption(option);
        } else {
          this.$toast(res.msg);
        }
      });
    },

    // 销售来源
    source() {
      let source = document.getElementById("source");
      let myChartChina = this.$echarts.init(source);
      this.utils.request.querySaleConstructionSourceChartsData({}, res => {
        console.log("销售来源", res);
        if (res.code == "0000") {
          let option = {
            title: {
              text: "销售来源_会员/非会员"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: ["销售额（会员）", "销售额（非会员）"]
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              data: res.data.x
            },
            yAxis: {
              type: "value"
            },
            series: [
              {
                barWidth: 50,
                name: "销售额（会员）",
                type: "bar",
                stack: "总量1",
                label: {
                  show: true,
                  position: "insideRight"
                },
                data: res.data.y1
              },
              {
                name: "销售额（非会员）",
                type: "bar",
                stack: "总量2",
                label: {
                  show: true,
                  position: "insideRight"
                },
                data: res.data.y2
              }
            ]
          };
          myChartChina.setOption(option);
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped  lang="scss">
 @import "../../../../assets/css/dataCenterEcharts.css";
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.ec-container {
  /* 左侧客户统计数量 */
  .left-wrap {
    height: 400px;
    padding-top: 10px;
    .top-wrap {
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 15px;
      .client-number {
        width: 48%;
        text-align: center;
        background-color: #fff;
        color: #333;
        padding-top: 10px;
      }
    }
    .bottom-wrap {
      background-color: #fff;
      padding: 20px;
      margin: 10px 8px 0 10px;
    }
  }
  /* 时间 */
  .time-wrap {
    margin-top: 20px;
    .wrap {
      background-color: #fff;
      text-align: left;
      padding: 20px;
      .title {
        font-size: 20px;
        font-weight: 700;
        color: #333;
      }
      .content {
        padding: 5px 0;
      }
    }
  }
  .wrap {
    background-color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-top: 10px;
    color: #333;
    h4 {
      font-weight: normal;
      font-size: 18px;
      margin-block-start: 10px;
      margin-block-end: 10px;
    }
    h2 {
      margin-block-start: 10px;
      margin-block-end: 10px;
    }
  }
  .tips-wrap {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 10px 10px 20px;
    p {
      line-height: 57px;
    }
  }
  .form /deep/ .el-col .grid-content .el-select {
    width: 150px;
  }
  .form {
    .el-date-editor {
      width: 120px;
    }
  }
}
</style>
